<template>
  <div id="h1">
    <div id="header1">
      <span>新冠疫苗预约</span>
      <!-- <h2>阿拉尔市疫苗接种管理系统客户端</h2> -->
    </div>
    <el-row>
      <el-button id="yu" type="success" @click="fanhui" plain>返回</el-button>
    </el-row>
    <div id="hezi">
      <div class="xi">
        <span class="f">姓名：</span>
        <span class="s">{{list.name}}</span>
      </div>
      <div class="xi">
        <span class="f">身份证号：</span>
        <span class="s">{{list.shenfen}}</span>
      </div>
      <div class="xi">
        <span class="f">性别：</span>
        <span class="s">{{list.sex}}</span>
      </div>
      <div class="xi">
        <span class="f">出身日期：</span>
        <span class="s">{{list.chudata}}</span>
      </div>
      <div class="xi">
        <span class="f">电话号码：</span>
        <span class="s">{{list.phone}}</span>
      </div>
      <div class="xi">
        <span class="f">户籍地址：</span>
        <span class="s">{{list.dizhi}}</span>
      </div>
      <div class="xi">
        <span class="f">请选择接种日期:</span>
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker
      v-model="value1"
      type="date"  value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
        </div>
      </div>
    </div>
    <el-row>
      <el-button id="liji" type="success" @click="yuyu">立即预约</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
    data() {
    return {
      sid: "",
      list: {},
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
      value1: "",
    };
  },
  created() {
    this.getParams();
    this.query();
  },
  methods: {
    fanhui() {
      this.$router.push({ path: "/user" , query:{nameId : this.sid}});
    },
    getParams: function() {
      this.sid = this.$route.query.nameId;
    },
    query() {
      this.$api_x.__api_one_users(this.sid).then(data =>{
        this.list = data;
        console.log(this.list)
      });
    },
    yuyu() {
      if(this.value1!=undefined){
          if(this.list.jiedata1==="") {
            this.list.jiedata1 = this.value1;
          }else if (this.list.jiedata2==="") {
            this.list.jiedata2 = this.value1;
          }else if (this.list.jiedata3===""){
            this.list.jiedata3 = this.value1;
          }else {
            alert("你打多了")
            return;
          }

          console.log(this.list)
          this.$api_x.__api_liji_users(this.list).then(data =>{
            alert("预约成功！")
          });
      }
    }
  },

};
</script>

<style>
#h1 {
  position: relative;
  width: 400px;
  margin: 0 auto;
}
#header1 {
  width: 100%;
  height: 50px;
  padding-top: 0;
  background-color: rgb(136, 219, 95);
}
#header1 span {
  line-height: 50px;
  font-size: 20px;
  color: #fff;
}
#yu {
  position: absolute;
  left: 3px;
  top: -41px;
}
#hezi {
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
  background-color: rgb(214, 235, 241);
}
#hezi .xi {
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 20px;
  border-bottom: 1px solid #aaa;
  text-align: left;
}
#hezi div span {
  font-size: 18px;
}
#hezi div .f {
  display: block;
}
#hezi div .s {
  font-size: 17px;
  padding-left: 70px;
}
#hezi .block {
  padding-left: 70px;
}
#liji {
  width: 160px;
  height: 40px;
  margin-top: 10px;
}
</style>
